<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import type {
		FormInstance,
		TabsPaneContext,
	} from 'element-plus'
	import dayjs from 'dayjs'
	// import storage from '@/utils/storage'
	import useUserStore from '@/store/modules/user'
	import productApi from '@/api/zhitan/product.ts'

	const dialogVisible : any = ref(false)
	const formRef : any = ref()
	const formRules : any = ref({
		name: [{
			required: true,
			message: '请输入分类名称',
			trigger: 'blur',
		}],
		icon: [{
			required: true,
			message: '请添加分类图标',
			trigger: 'blur',
		}],
	})
	const form : any = ref({})
	const total : any = ref(0)

	const loadingRef : any = ref(null)
	const paging : any = ref({
		page: 1,
		limit: 10,
	})

	const dataList : any = ref([])// 表格
	const topIndex : any = ref(1)
	const topList : any = ref([
		{
			id: 1,
			name: '余额明细',
			value: 1,
			num: 10,
		},
		{
			id: 2,
			name: '使用记录',
			value: 2,
			num: 19,
		},
		{
			id: 3,
			name: '提现记录',
			value: 3,
			num: 5,
		},
		{
			id: 4,
			name: '设置',
			value: 4,
		},
	])
	const userStore : any = useUserStore()
	onMounted(() => {
		// console.log(userStore.permissions, userStore.permissions.includes('catemanargeadd'), 'storage.local.ge')

		//  promisstionAuths.value = 
		getList()
	})
	// 分页代码
	function pagChange(e : any) {
		paging.value = Object.assign(paging.value, e)
		getList()
	}

	function getList() {
		productApi.ProductGroup_list(paging.value).then((res : any) => {
			if (res.code === 0) {
				dataList.value = res.data
				total.value = res.count
			}
		})
	}
	function modify(row : any, type : any) {
		if (type === 1) {
			form.value = {
				status: 1,
				is_top: 1,
				sort: 1
			}
		}
		else {
			form.value = JSON.parse(JSON.stringify(row))
		}
		dialogVisible.value = true
	}

	function removeBatch(row : any) {
		productApi.ProductGroup_delete({ id: row.id }).then((res : any) => {
			if (res.code === 0) {
				getList()
				dialogVisible.value = false
				ElMessage({
					type: 'success',
					message: '操作成功',
				})
			}
		})
	}
	function submitForm() {
		formRef.value && formRef.value.validate((valid : any) => {
			if (valid) {
				productApi.ProductGroup_edit(form.value).then((res : any) => {
					if (res.code === 0) {
						getList()
						dialogVisible.value = false
						ElMessage({
							type: 'success',
							message: '操作成功',
						})
					}
				})
			}
		})
	}
	function handleSuccess(res : any) {
		if (res) {
			form.value.icon = res
		}
		else {
			form.value.icon = ""
		}
	}
</script>

<template>
	<div class="absolute-container">
		<!-- <PageHeader>
      <template #title>
        <div class="custom-style">
          <el-segmented v-model="topIndex" :options="topList" class="custom-style">
            <template #default="{ item }">
              <div class="flex flex-col items-center gap-2 p-2">
                <div>
                  <span>{{ item.name }}</span>
                  <span v-if="item.num">({{ item.num }})</span>
                </div>
              </div>
            </template>
          </el-segmented>
        </div>
      </template>
    </PageHeader> -->
		<PageMain style="position: relative;">
			<div class="d-c flex">
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="分类名称:">
						<el-input v-model="paging.name" clearable placeholder="输入分类名称" @clear="paging.name = null" />
					</el-form-item>

					<el-form-item label="状态" style="width: 200px;">
						<el-select v-model="paging.status" clearable placeholder="请选择状态" @clear="paging.status = null">
							<el-option label="正常" value="1" />
							<el-option label="禁用" value="2" />
						</el-select>
					</el-form-item>
					<el-form-item label="是否置顶" style="width: 200px;">
						<el-select v-model="paging.is_top" clearable placeholder="请选择是否置顶"
							@clear="paging.is_top = null">
							<el-option label="是" value="1" />
							<el-option label="否" value="0" />
						</el-select>
					</el-form-item>
					<!-- <el-form-item label="起始时间:">
            <el-date-picker v-model="paging.date" type="daterange" clearable range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" value-format="x" @clear="paging.date = null" />
          </el-form-item> -->
					<el-form-item>
						<el-button type="primary" @click="getList()">
							<template #icon>
								<svg-icon name="ep:search" />
							</template>
							查询
						</el-button>
						<el-button @click="paging = {
                page: 1,
                limit: 10,
                name: null,
              }, getList()">
							重置
						</el-button>
					</el-form-item>
				</el-form>
				<div class="btnbox" v-if="userStore.permissions.includes('catemanargeadd')">
					<el-button type="primary" size="default" @click="modify(null, 1)">
						<template #icon>
							<svg-icon name="ep:plus" />
						</template>
						添加
					</el-button>
				</div>
			</div>
			<el-table :data="dataList" highlight-current-row border height="calc(100vh - 300px)">
				<el-table-column prop="id" label="ID" width="60" align="center" />
				<el-table-column prop="name" label="分类图标" width="100" align="center">
					<template #default="{ row: i }">
						<image-preview :src="i.icon" :width="60" :height="60" />
					</template>
				</el-table-column>
				<el-table-column prop="name" label="分类名称" align="left">
					<template #default="{ row: i }">
						<div class="aic flex">
							{{i.name}}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="is_top" label="是否置顶" width="100" align="center">
					<template #default="{ row: i }">
						<el-tag type="success" v-if="i.is_top===1">是</el-tag>
						<el-tag type="warning" v-else>否</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" width="120" align="center">
					<template #default="{ row }">
						<div v-if="row.status === 1" class="relative flex items-center justify-center">
							<div data-v-7edfc4d9="" class="badge relative mr-2 inline-flex">
								<span
									class="absolute left-[50%] top-0 z-20 h-1.5 w-1.5 whitespace-nowrap rounded-full bg-ui-primary px-1.5 text-xs text-ui-text ring-1 ring-light before:absolute before:left-0 before:top-0 left-[100%]! before:block before:h-full before:w-full -translate-x-[50%] -translate-y-[50%] before:animate-ping before:rounded-full before:bg-ui-primary px-0! -indent-9999 dark:ring-dark before:content-empty">true</span>
							</div>
							正常
						</div>
						<div v-else class="relative flex items-center justify-center">
							<div data-v-7edfc4d9="" class="badge downcol relative mr-2 inline-flex">
								<span
									class="absolute left-[50%] top-0 z-20 h-1.5 w-1.5 whitespace-nowrap rounded-full bg-ui-primary px-1.5 text-xs text-ui-text ring-1 ring-light before:absolute before:left-0 before:top-0 left-[100%]! before:block before:h-full before:w-full -translate-x-[50%] -translate-y-[50%] before:animate-ping before:rounded-full before:bg-ui-primary px-0! -indent-9999 dark:ring-dark before:content-empty">true</span>
							</div>
							暂停
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="sort" label="排序" width="100" align="center" />
				<el-table-column prop="create_time" label="创建时间" width="180" align="center">
					<template #default="{ row: i }">
						{{ dayjs(i.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="220" align="center">
					<template #default="scope">
						<el-button type="primary" text @click="modify(scope.row, 2)"
							v-if="userStore.permissions.includes('catemanargeedit')">
							<template #icon>
								<svg-icon name="ep:edit" />
							</template>修改
						</el-button>
						<el-popconfirm title="确定删除吗？" @confirm="removeBatch(scope.row)"
							v-if="userStore.permissions.includes('catemanargedelete')">
							<template #reference>
								<el-button type="danger" text>
									<template #icon>
										<svg-icon name="ep:delete" />
									</template>删除
								</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<page-compon :page="paging.page" :size="paging.limit" :total="total" style="margin-top: 16px;"
				@pag-change="pagChange" />
		</PageMain>
		<HDialog v-model="dialogVisible" :title="form.id ? '编辑分类' : '新增分类'" modulewidth="450px">
			<el-form ref="formRef" :model="form" class="px-2" :rules="formRules" label-position="top"
				label-width="100px">
				<el-form-item label="分类名称：" prop="name">
					<el-input v-model="form.name" size="large" placeholder="请输入分类名称" clearable />
				</el-form-item>
				<el-form-item label="分类图标：" prop="icon" class="avatar">
					<ImageUpload v-model:url="form.icon" :width="1" :notip="true" :height="1"
						@onSuccess="handleSuccess" />
				</el-form-item>
				<el-form-item label="首页置顶：" prop="is_top">
					<el-radio-group v-model="form.is_top">
						<el-radio :value="1">
							是
						</el-radio>
						<el-radio :value="0">
							否
						</el-radio>
					</el-radio-group>
				</el-form-item>
				<!-- <el-form-item label="罟顶样式：" prop="style_type">
					<el-radio-group v-model="form.style_type">
						<el-radio :value="1">
							四宫格
						</el-radio>
						<el-radio :value="2">
							单一列表
						</el-radio>
					</el-radio-group>
				</el-form-item> -->
				<el-form-item label="分类状态：" prop="status">
					<el-radio-group v-model="form.status">
						<el-radio :value="1">
							正常
						</el-radio>
						<el-radio :value="2">
							暂停
						</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="排序：" prop="sort">
					<el-input-number v-model="form.sort" style="width: 100%;" size="large" placeholder="请输入排序号" :min="0"
						controls-position="right" />
				</el-form-item>
			</el-form>

			<template #footer>
				<div class="fotterbtn">
					<el-button class="cancel" @click="dialogVisible = false, form = {} ">
						取消
					</el-button>
					<el-button type="primary" @click="submitForm">
						保存
					</el-button>
				</div>
			</template>
		</HDialog>
	</div>
</template>

<style lang="scss" scoped>
	@import "@/assets/styles/tool";

	.avatar {
		:deep(.el-image) {
			width: 100px !important;
			height: 100px !important;
		}

		:deep(.image-slot) {
			width: 100px !important;
			height: 100px !important;
		}

		/* :deep(.el-upload__tip) {
    display: none !important;
  } */
	}

	:deep(.guestBox .el-overlay-dialog) {
		background-color: rgb(255 255 255 / 80%);
	}

	:deep(.guestBox .el-dialog) {
		padding: 24px;
		border-radius: 10px;
	}

	:deep(.guestBox header) {
		padding-left: 16px;
		font-size: 16px;
		font-weight: 550;
		border-bottom: 1px solid #f2f2f2;
	}

	:deep(.guestBox .el-dialog__headerbtn .el-dialog__close) {
		font-size: 20px;
		color: #000;
	}

	.btnbox {
		position: absolute;
		top: 20px;
		right: 20px;
	}

	.btnbox>.el-button {
		font-size: 12px;
	}

	.downcol {
		.before\:bg-ui-primary::before {
			background-color: red;
		}

		.bg-ui-primary {
			background-color: red;
		}
	}
</style>